<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-col :span="12" class="box-card">
      <el-card>
        <el-input name="username" v-model="username" placeholder="请输入账户名" clearable maxlength="10" show-word-limit>
        </el-input>
        <el-input name="pwd" v-model="pwd" placeholder="请输入密码" show-password maxlength="10">
        </el-input>
        <el-button type="primary" @click="open">登陆</el-button>
      </el-card>
    </el-col>
  </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        username: "",
        pwd: "",
      }
    },
    methods: {
      open() {
        if (this.username === "admin" && this.pwd === "123456") {
          window.open("https://www.baidu.com", '_top')
        } else {
          this.$alert('登陆失败', { confirmButtonText: '确定' })
        }
      }
    }
  }
  )
</script>

</html>